<template>
  <el-dialog
    :title="form.licensePlate ? '车牌：' + form.licensePlate : ''"
    v-model="isShow"
    :before-close="handleClose"
  >
    <el-descriptions border :column="2" v-loading="initLoading">
      <el-descriptions-item
        label="施工单位"
        label-align="right"
        width="120px"
        >{{ form.constructionUnit }}</el-descriptions-item
      >
      <el-descriptions-item label="车牌" label-align="right">{{
        form.licensePlate
      }}</el-descriptions-item>

      <el-descriptions-item label="免费开始时间" label-align="right">{{
        form.freeTimeStart
      }}</el-descriptions-item>
      <el-descriptions-item label="免费结束时间" label-align="right">{{
        form.freeTimeEnd
      }}</el-descriptions-item>

      <el-descriptions-item label="免费区间" label-align="right">{{
        form.freeSection
      }}</el-descriptions-item>
      <el-descriptions-item label="车辆类型" label-align="right">{{
        form.vehicleType
      }}</el-descriptions-item>
      <el-descriptions-item label="车辆年检有效期" label-align="right">{{
        form.theValidityPeriodOfTheAnnualInspectionOfTheVehicle
      }}</el-descriptions-item>
      <el-descriptions-item label="车辆保险有效期" label-align="right">{{
        form.validityPeriodOfVehicleInsurance
      }}</el-descriptions-item>
      <el-descriptions-item label="更新日期" label-align="right" span="2">{{
        form.updatedDate
      }}</el-descriptions-item>
      <el-descriptions-item label="备注" label-align="right" span="2">{{
        form.remark
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="免费区间" label-align="right" span="2">{{
        form.freeSection
      }}</el-descriptions-item> -->
    </el-descriptions>
  </el-dialog>
</template>

<script>
import { ref, reactive, toRefs, watch } from 'vue'
import { getFreeCar } from '@/api/freeCar'

export default {
  props: {
    visible: Boolean,
    id: {
      required: true,
      type: Number
    }
  },
  emits: ['closed'],
  setup(props, context) {
    const formRef = ref()
    const state = reactive({
      isShow: false,
      initLoading: true,
      form: {}
    })

    const handleClose = done => {
      if (typeof done === 'function') {
        done()
      }
      state.form = {}
      context.emit('closed')
    }

    watch(
      () => props.visible,
      (newVisible, oldVisible) => {
        if (newVisible) {
          state.initLoading = true
          getFreeCar(props.id)
            .then(res => (state.form = res.data))
            .finally(() => {
              state.initLoading = false
            })
        }
        state.isShow = newVisible
      }
    )

    return {
      formRef,
      ...toRefs(state),
      handleClose
    }
  }
}
</script>
